<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Astral Gate</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">
    <ng-container *ngIf="player.$premiumData as premium">
      <ion-row *ngFor="let gacha of gachas">
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          <ion-card *ngIf="player.$premiumData">
            <ion-card-header>
              <ion-card-subtitle *ngIf="!gacha.value.requiredToken">You have {{ player.$premiumData.ilp | number }} ILP</ion-card-subtitle>
              <ion-card-title>
                <ion-row class="vertical-center">
                  <ion-col class="vertical-center">
                    {{ gacha.value.name }}
                  </ion-col>

                  <ion-col class="ion-text-right">
                    <ion-button size="small" class="ion-text-right" color="tertiary" (click)="showOdds(gacha.value)">Odds</ion-button>
                  </ion-col>
                </ion-row>
              </ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-row>
                {{ gacha.value.desc }}
              </ion-row>

              <ion-row>
                <br>
              </ion-row>

              <ion-row>
                <ion-col *ngIf="canRollGachaFree(player, gacha.value)">
                  <ion-button color="secondary" (click)="roll(gacha.key, gacha.value, 10, true)">Free Roll</ion-button>
                </ion-col>

                <ion-col class="ion-text-right">
                  <ion-button [disabled]="!canRoll(player, gacha.value, 1)" (click)="roll(gacha.key, gacha.value, 1)">Roll ({{ gacha.value.rollCost | number }} {{ gacha.value.requiredToken || 'ILP' }})</ion-button>
                  <ion-button [disabled]="!canRoll(player, gacha.value, 10)" (click)="roll(gacha.key, gacha.value, 10)">Roll x10 ({{ gacha.value.rollCost * 10 | number }} {{ gacha.value.requiredToken || 'ILP' }})</ion-button>
                  <ion-button [disabled]="!canRoll(player, gacha.value, 100)" (click)="roll(gacha.key, gacha.value, 100)">Roll x100 ({{ gacha.value.rollCost * 100 | number }} {{ gacha.value.requiredToken || 'ILP' }})</ion-button>
                </ion-col>
              </ion-row>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ng-container>
  </ng-container>
</ion-content>
